<script setup lang="ts">
import { ref, defineProps, } from 'vue';
import {setMenu, getMenu} from "@/config";
import IconPack from "@/components/utils/icon-pack.vue";

const { option,defKey } = defineProps({
  option: {
    required: true,
    type: Array,
  },
  defKey: {
    required: false,
    type: String,
    default: ''
  }
})
const menus:any = option as IMenu[]
const collapsed = ref<boolean>(false);
const selectedKeys = ref<string[]>([`${getMenu(2) ? getMenu(2) : menus[0].key}`]);
</script>

<template>
  <a-layout-sider
      v-model:collapsed="collapsed"
      collapsible
      theme="light"
      style="position: relative"
  >
    <a-menu
        v-model:selectedKeys="selectedKeys"
        theme="light"
        class="sider-menu"
        mode="inline"
    >
      <a-menu-item v-for="item in menus" :key="item.key" class="menu-set">
        <icon-pack :icon="item.icon" :size="18" class="icon-set"/>
        <span>
          <router-link :to="item.href" @click="setMenu(item.key,2)">
            {{item.label}}
          </router-link>
        </span>
      </a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>

<style scoped lang="scss">
.menu-set{
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon-set{
  margin-right: 0.5rem;
}
.sider-menu{
  position: sticky;
  top: 0;
}
</style>